<template>
  <a-layout-content style="margin: 0 16px">
    <a-button type="primary" @click="goback()" style="margin-bottom: 20px">返回</a-button>
    <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
      <a-input v-model:value="searchData.dealerId" placeholder="请输入导购名称" class="searchStyle" :allowClear="true" />
      <a-input v-model:value="searchData.storeId" placeholder="请输入门店名称" class="searchStyle" :allowClear="true" />
      <a-select v-model:value="searchData.taskStatus" :options="taskStatusData" :allowClear="true" class="searchStyle" placeholder="任务状态"> </a-select>
      <a-button type="primary" style="margin-right: 10px" @click="searchBtn()">查询</a-button>
      <a-button @click="resetBtn()">重置</a-button>
      <!-- 业务场景表格 -->
      <!-- 导购任务 -->
      <a-table class="assignmentTable" v-if="this.taskObject === 1" :scroll="{ x: 1800, y: 350 }" bordered :data-source="dataSource" rowKey="id" :columns="columns2" :pagination="false">
        <!-- 表格内的按钮 -->
        <!-- 反馈信息 -->
        <span slot="action" slot-scope="text, record">
          <a type="link" @click="getNew(record.id)">详情</a>
          <a-popconfirm v-if="record.taskStatus !== '已取消'" title="确认取消任务吗？" ok-text="继续" cancel-text="取消" @confirm="confirm(record.id)" @cancel="cancel" okType="primary">
            <a type="link" style="margin-left: 10px">取消</a>
          </a-popconfirm>
        </span>
      </a-table>
      <!-- 门店任务 -->
      <a-table class="assignmentTable" v-if="this.taskObject === 2" :scroll="{ x: 1800, y: 350 }" bordered :data-source="dataSource" rowKey="id" :columns="columns" :pagination="false">
        <!-- 表格内的按钮 -->
        <!-- 反馈信息 -->
        <span slot="feedContent" slot-scope="text, record" v-if="record.feedback.feedContent">
          <p>
            反馈内容: <span>{{ record.feedback.feedContent }}</span>
          </p>
        </span>
        <span slot="feedbackPict" slot-scope="text, record" v-if="record.feedback.feedContent">
          <div>
            (共{{ imgLength(record.feedback.feedbackPict) }}张):<img
              :src="changeImg(record.feedback.feedbackPict)"
              @click="bigImg(record.feedback.feedbackPict)"
              style="width: 100px; height: 100px"
              alt=""
            />
          </div>
        </span>
        <span slot="action" slot-scope="text, record">
          <a type="link" @click="getNew(record.id)">详情</a>
          <a-popconfirm v-if="record.taskStatus !== '已取消'" title="确认取消任务吗？" ok-text="继续" cancel-text="取消" @confirm="confirm(record.id)" @cancel="cancel" okType="primary">
            <a type="link" style="margin-left: 10px">取消</a>
          </a-popconfirm>
        </span>
      </a-table>
      <!-- 自定义任务 -->
      <a-table class="assignmentTable" v-if="this.taskObject === 3" :scroll="{ x: 1800, y: 350 }" bordered :data-source="dataSource" rowKey="id" :columns="columns1" :pagination="false">
        <!-- 表格内的按钮 -->
        <!-- 反馈信息 -->
        <span slot="action" slot-scope="text, record">
          <a type="link" @click="getNew(record.id)">详情</a>
          <a-popconfirm v-if="record.taskStatus !== '已取消'" title="确认取消任务吗？" ok-text="继续" cancel-text="取消" @confirm="confirm(record.id)" @cancel="cancel" okType="primary">
            <a type="link" style="margin-left: 10px">取消</a>
          </a-popconfirm>
        </span>
      </a-table>
      <div class="pageData">
        <div class="all">
          <span>共&nbsp;{{ total }}&nbsp;条数据</span>
        </div>

        <a-pagination v-model:pageSize="pageSize" v-model:current="pageNumber" show-quick-jumper :total="total" @change="onChange" />
      </div>
    </div>
  </a-layout-content>
</template>

<script>
import { getTaskDetail, cancelChildTask, getTaskObject } from '@/api/task/taskrelese'
export default {
  components: {},
  data() {
    return {
      taskObject: 1,
      imgUrl: '',
      imgCount: '',
      searchData: {},
      taskDefineId: '',
      taskStatusData: [
        { label: '未开始', value: 0 },
        { label: '待完成', value: 1 },
        { label: '已完成', value: 2 },
        { label: '已超期', value: 3 },
        { label: '已失效', value: 4 },
        { label: '超期已完成', value: 5 },
        { label: '已取消', value: 6 },
        { label: '已废弃', value: 7 }
      ],
      pageNumber: 1,
      pageSize: 10,
      total: 0,
      queryDetailVisible: false,
      dataSource: [],
      taskMess: [],
      // 门店任务
      columns: [
        {
          title: 'ID',
          dataIndex: 'id'
        },
        {
          title: '任务名称',
          dataIndex: 'taskTitle'
        },
        {
          title: '任务类型',
          dataIndex: 'taskTypeValue'
        },
        {
          title: '导购',
          dataIndex: 'taskDealer'
        },
        {
          title: '门店',
          dataIndex: 'taskStore'
        },
        {
          title: '任务状态',
          dataIndex: 'taskStatus'
        },
        {
          title: '开始时间',
          dataIndex: 'startDate'
        },
        {
          title: '有效期',
          dataIndex: 'effectDate'
        },
        {
          title: '到期是否执行',
          dataIndex: 'endProcess'
        },
        {
          title: '反馈内容',
          dataIndex: 'feedContent',
          scopedSlots: { customRender: 'feedContent' }
        },
        {
          title: '反馈图片',
          dataIndex: 'feedbackPict',
          width: '12%',
          scopedSlots: { customRender: 'feedbackPict' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          fixed: 'right',
          width: 100,
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 自动任务
      columns1: [
        {
          title: 'ID',
          dataIndex: 'id'
        },
        {
          title: '任务名称',
          dataIndex: 'taskTitle'
        },
        {
          title: '任务类型',
          dataIndex: 'taskTypeValue'
        },
        {
          title: '任务状态',
          dataIndex: 'taskStatus'
        },
        {
          title: '开始时间',
          dataIndex: 'startDate'
        },
        {
          title: '有效期',
          dataIndex: 'effectDate'
        },
        {
          title: '到期是否执行',
          dataIndex: 'endProcess'
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          fixed: 'right',
          width: 100,
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 导购任务
      columns2: [
        {
          title: 'ID',
          dataIndex: 'id'
        },
        {
          title: '任务名称',
          dataIndex: 'taskTitle'
        },
        {
          title: '任务类型',
          dataIndex: 'taskTypeValue'
        },
        {
          title: '导购',
          dataIndex: 'taskDealer'
        },
        {
          title: '门店',
          dataIndex: 'taskStore'
        },
        {
          title: '任务状态',
          dataIndex: 'taskStatus'
        },
        {
          title: '开始时间',
          dataIndex: 'startDate'
        },
        {
          title: '结束时间',
          dataIndex: 'effectDate'
        },
        {
          title: '到期是否执行',
          dataIndex: 'endProcess'
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          fixed: 'right',
          width: 100,
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  created() {
    this.taskDefineId = this.$route.query.id
    this.getList()
    this.getTaskObject()
  },
  methods: {
    bigImg(str) {
      if (str) {
        let arr = JSON.parse(str)
        console.log(arr, 'arr')
        // this.imgCount=arr.length
        let imgUrl = arr[0]
        console.log(imgUrl)
        let a = window.open('')
        a.document.write(
          `<!DOCTYPE html><html><body ><div style="display: flex;justify-content: center;align-items: center"><img style="width:800px;height:800px"src='${imgUrl}'/></div></body></html>`
        )
      }
    },
    imgLength(str) {
      if (str) {
        let arr = JSON.parse(str)
        console.log(arr, 'arr')
        return arr.length
      }
    },
    getTaskObject() {
      let data = { id: this.taskDefineId }
      getTaskObject(data, res => {
        this.taskObject = res.data
      })
    },
    changeImg(str) {
      if (str) {
        let arr = JSON.parse(str)
        console.log(arr, 'arr')
        this.imgCount = arr.length
        return arr[0]
      }
    },
    cancel() {
      console.log('取消了')
    },
    goback() {
      window.history.back()
    },
    getList() {
      let params = {
        taskDefineId: Number(this.taskDefineId),
        pageSize: this.pageSize,
        pageNumber: this.pageNumber,
        taskDealer: this.searchData.dealerId,
        taskStore: this.searchData.storeId,
        taskStatus: Number(this.searchData.taskStatus)
      }
      getTaskDetail(params, res => {
        console.log(params)
        console.log(res)
        if (res.data.records.length > 0) {
          res.data.records.forEach(item => {
            if (item.taskStatus === 0) {
              item.taskStatus = '未开始'
            } else if (item.taskStatus === 1) {
              item.taskStatus = '待完成'
            } else if (item.taskStatus === 2) {
              item.taskStatus = '已完成'
            } else if (item.taskStatus === 3) {
              item.taskStatus = '已超期'
            } else if (item.taskStatus === 4) {
              item.taskStatus = '已失效'
            } else if (item.taskStatus === 5) {
              item.taskStatus = '超期已完成'
            } else if (item.taskStatus === 6) {
              item.taskStatus = '已取消'
              this.cancelTask = true
            } else if (item.taskStatus === 7) {
              item.taskStatus = '已废弃'
            }
            if (item.endProcess === 1) {
              item.endProcess = '是'
            } else if (item.endProcess === 2) {
              item.endProcess = '否'
            }
          })
          this.dataSource = res.data.records

          this.total = res.data.total
        }
      })
    },
    searchBtn() {
      this.getList()
    },
    resetBtn() {
      this.searchData.dealerId = ''
      this.searchData.storeId = ''
      this.searchData.taskStatus = undefined
      this.searchBtn()
      this.$message.success('已重置筛选')
    },
    // 查看任务详情数据
    getNew(id) {
      this.$router.push({
        path: '/task/particulars',
        query: {
          id
        }
      })
    },
    confirm(id) {
      console.log(id)
      cancelChildTask(
        {
          id
        },
        res => {
          console.log(res)
          this.getList()
          this.$message.success('取消成功')
        }
      )
    },

    onChange(page, pageSize) {
      console.log(page, 'page')
      console.log(pageSize, 'pageSize')
      this.pageNumber = page
      this.pageSize = pageSize
      this.getList()
    }
  }
}
</script>

<style scoped lang='less'>
#components-layout-demo-side .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}
.assignmentTable {
  margin-top: 20px;
}
.site-layout .site-layout-background {
  background: #fff;
}
[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}
.label-item {
  .ant-form-item-label {
    label {
      width: 70px;
      text-align: center;
    }
  }
}
.tishi {
  color: #7f7f7f;
  font-size: 12px;
  margin-left: 15px;
}
.ant-select {
  margin-right: 10px;
}
.pageData {
  display: flex;
  flex: 1;
  justify-content: space-between;
  margin-top: 40px;
}
.all span {
  line-height: 32px;
}
.mess {
  margin-bottom: 10px;
  display: flex;
  p {
    width: 100px;
    text-align: right;
  }
}
// /deep/.messType{
//     width: 100px;
//     text-align: right;
// }
.ant-table-wrapper {
  margin-top: 10px;
}
.searchStyle {
  width: 200px;
  margin-right: 10px;
}
.feedImg {
  margin-top: 10px;
}
/deep/.ant-image {
  margin: 0 5px 5px 0;
  width: 120px;
  height: 120px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
